<template>
  <div>
    <van-nav-bar title="设置"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <div class="setting-list">
      <div class="setting-list-item"
           v-for="item in data.list"
           :key="item">
        <van-icon class="setting-list-icon"
                  name="setting"
                  color="#87d4eb"
                  size="15" />
        <router-link :to="item.derectTo">

          <p class="setting-list-text">{{item.text}}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, getCurrentInstance } from 'vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      list: [{
        text: '意见反馈',
        icon: 'message',
        derectTo: '/user/FeedBack'
      }]
    })
    function onClickLeft () {
      window.history.length > 1 ? proxy.$router.go(-1) : proxy.$router.push('/user')
    }
    return {
      data,
      onClickLeft
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-list {
  margin: 15px auto;
  width: 90%;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
  background-color: $theme-color3;
  border-radius: $border-radius-2;
  &-item {
    height: 55px;
    line-height: 55px;
    padding-left: 15px;
  }
  &-text {
    display: inline;
    margin-left: 10px;
    font-size: $fontsize-4;
  }
}
</style>
